import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Card,message,Button ,Row,Col,Input,Spin} from 'antd';
import api from '../../api';
import {bind_change} from '../../common/State';

export default class AccountInfo extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
          visible:false,
          hasBlance:true,
          loading:true,
          account:{}
        };
    }

    componentWillMount(){
      let {id,tabType,curType} = this.props;
      if(tabType==curType&&id){
        this.fetchAccount(id)
      }
    }
    componentWillReceiveProps(nextProps){
      let {id,tabType,curType} = nextProps;
      this.setState({loading:true})
      if(tabType==curType&&id){
        this.fetchAccount(id)
      }
    }

    //获取账户信息
    async fetchAccount(id){
      let result = await api('/user/find/account',{id});
      if(result.cd!=0){
        message.error(result.msg)
        return;
      }
      this.setState({
        account:result.data||{},
        loading:false,
        hasBlance:((result.data||{}).accountCapitalInfo||{}).accountBalance>0
      })
    }
   
   //确定事件
    async handleOk(){
      let {hasBlance,account} = this.state;
      let {accountCapitalInfo={}} = account;
      let {id} = this.props;
      if(hasBlance){
        this.setState({
          hasBlance:false
        })
        return;
      }
      let {bankCardNo} = this.state;
      if(!bankCardNo){
        message.error('请填写银行卡号');
        return
      }
      let result = await api('/user/account/changeBankCardNo',{id,bankCardNo});
      if(result.cd!=0){
        message.error(result.msg);
        return
      }
      message.success('更换成功');
      this.setState({
        visible:false
      })
      this.fetchAccount(id)
      
    }
   
    render() {
      let {visible,hasBlance,loading,account = {}} = this.state;
      let {accountCapitalInfo={},thirdPartyPaymentInfo={},userBaseInfo={}} = account;
      accountCapitalInfo = accountCapitalInfo==null?{}:accountCapitalInfo;
      thirdPartyPaymentInfo = thirdPartyPaymentInfo==null?{}:thirdPartyPaymentInfo;
      userBaseInfo = userBaseInfo==null?{}:userBaseInfo;
        return (
            <div >
              <Spin tip="加载中..." spinning={loading}>
              <Card title="用户基本信息" >
                <div className='block-detail-container'>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>用户头像</label>
                        <div>
                          {userBaseInfo.portrait?
                            <img width={80} height={80} src={userBaseInfo.portrait}/>
                            :'暂无'
                          }
                          
                        </div>
                    </div>
                    <div className='d-col'>
                        <label>用户昵称</label>
                        <div>{userBaseInfo.nickname||'--'}</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>微信号</label>
                        <div>{userBaseInfo.wechatId||'--'}</div>
                    </div>
                    <div className='d-col'>
                        <label>手机号</label>
                        <div>{userBaseInfo.phone||'--'}</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>微博号</label>
                        <div>{userBaseInfo.weibo||'--'}</div>
                    </div>
                    <div className='d-col'>
                        <label>QQ号</label>
                        <div>{userBaseInfo.qq||'--'}</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>最近登录时间</label>
                        <div>{userBaseInfo.lastLoginTime||'--'}</div>
                    </div>
                    <div className='d-col'>
                        <label>注册时间</label>
                        <div>{userBaseInfo.registerTime||'--'}</div>
                    </div>
                  </div>
                </div>
              </Card>
              <div className='height20'></div>
               <Card title="账户资金信息" >
                <div className='block-detail-container'>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>账户余额</label>
                        <div>{accountCapitalInfo.accountBalance||0.00} 元</div>
                    </div>
                    <div className='d-col'>
                        <label>可用余额</label>
                        <div>{accountCapitalInfo.availableBalance||0.00} 元</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>应收本金</label>
                        <div>{accountCapitalInfo.receivablePrincipal||0.00} 元</div>
                    </div>
                    <div className='d-col'>
                        <label>应收利息</label>
                        <div>{accountCapitalInfo.receivableInterest||0.00} 元</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>冻结资金</label>
                        <div>{accountCapitalInfo.frozenCapital||0.00} 元</div>
                    </div>
                  </div>
                </div>
              </Card>
              <div className='height20'></div>
              <Card title="第三方支付信息">
                <div className='block-detail-container'>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>真实姓名</label>
                        <div>{thirdPartyPaymentInfo.realName}</div>
                    </div>
                    <div className='d-col'>
                        <label>身份证号码</label>
                        <div>{thirdPartyPaymentInfo.idNumber}</div>
                    </div>
                  </div>
                  <div className='d-row'>
                    <div className='d-col'>
                        <label>银行卡号</label>
                        <div>{thirdPartyPaymentInfo.bankCardNo}</div>
                        {thirdPartyPaymentInfo.bankCardNo?
                          <a 
                          className='marginL10' 
                          href='javascript:void 0;' 
                          onClick={()=>{
                            this.setState({visible:true})
                          }}
                        >更换银行卡</a>
                        :null
                        }
                    </div>
                    <div className='d-col'>
                        <label>预留手机号</label>
                        <div>{thirdPartyPaymentInfo.reservedPhone}</div>
                    </div>
                  </div>
                </div>
              </Card>
              </Spin>
              <Modal
                title={hasBlance?'温馨提示':'更换银行卡'}
                visible={visible}
                onOk={this.handleOk.bind(this)}
                onCancel={()=>{
                  this.setState({
                    visible:false,
                    hasBlance:accountCapitalInfo.accountBalance>0
                  })
                }}
              >
                {hasBlance?
                  <p style={{margin:'20px 0',textAlign:'center',fontSize:'14px'}}>用户账户还有余额，是否确定仍然更换</p>
                  :
                  <div className='block-detail-container'>
                      <div className='height10'></div>
                      <div className='d-row'>
                        <div className='d-col middle'>
                            <label>银行卡号:</label>
                            <div style={{width:'250px'}}>
                              <Input
                                size="large" 
                                placeholder='请输入银行卡号' 
                                value={this.state.bankCardNo}
                                onChange={(e)=>{
                                  let value = e.target.value.replace(/[^\d]/g,'');
                                  this.setState({
                                    bankCardNo:value.substr(0,30)
                                  })
                                }}
                              />
                            </div>
                        </div>
                      </div>
                      <div className='height20'></div>
                  </div>
                }
                
              </Modal>
            </div>
        );
    }

    
}

AccountInfo.contextTypes= { router: React.PropTypes.object.isRequired};

